<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>订单列表</title>
<!-- 公用样式css -->
<link href="css/base.css" rel="stylesheet" type="text/css" />
<!-- 界面引入css -->
<link href="css/order-list.css" rel="stylesheet" type="text/css" />
<!-- ui框架引入css -->
<link href="css/weui.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-weui.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #refreshText {
            position: absolute;
            width: 100%;
            line-height: 50px;
            height: 50px;
            text-align: center;
            left: 0;
            top: 0;
            transform: translateY(-50px);
            color:#999;
        }
    </style>
</head>
<body>
<div id="refreshText">释放立即刷新...</div>
<div id="main" class="main bot44">
   <div class="weui-tab">
      <div class="weui-navbar">
        <a class="weui-navbar__item <c:if test='${ordState==1000}'>weui-bar__item--on</c:if> " id="allorder" href="#" onclick="_selectOrderList(1000);return false;">
          	全部订单
        </a>
        <a class="weui-navbar__item <c:if test='${ordState==0}'>weui-bar__item--on</c:if>" href="#" id="toPay" onclick="_selectOrderList(0);return false;">
         	 待支付
        </a>
        <a class="weui-navbar__item <c:if test='${ordState==1}'>weui-bar__item--on</c:if>" href="#" id="toLive" onclick="_selectOrderList(1);return false;">
         	 待入住
        </a>
        <a class="weui-navbar__item <c:if test='${ordState==2}'>weui-bar__item--on</c:if>" href="#" id="toJudge" onclick="_selectOrderList(2);return false;">
        	  待评价
        </a>
      </div>
      <div class="weui-tab__bd">
        <!-- <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"> -->
           <div class="order-content" id="contentDiv">
               <c:if test="${dataList != ''}">
                   <c:forEach var="info" items="${dataList}">


                       <div class="order-con">
                           <div class="title">
                               <b class="num" onclick="_gotoDetail('${info.Code}');return false;">${info.HotelName}</b>

                               <i class="state state-button" <c:if test="${info.OrdState==0}"> onclick="_toPay('${info.Code}');return false;" </c:if>
                                   <c:if test="${info.OrdState>2}">onclick="_toJuage('${info.Code}','${info.HotelName}');return false;" </c:if> >${info.OrdStateName}</i>
                           </div>
                           <div class="list" onclick="_gotoDetail('${info.Code}');return false;">
                               <i>
                                   <p>${info.RoomType}</p>
                                   <p class="num">订购数量${info.RoomNum}</p>
                               </i>
                           </div>
                           <div class="bot">
                               <b class="price">¥${info.TotalSettlement}</b>
                               <%--200已完成，-1已取消--%>
                               <c:if test="${info.OrdState==200||info.OrdState==-1}">
                                    <%--<i class="data data-button" onclick="_orderAgain('${info.Code}');return false;">再次预订</i>--%>
                                   <i class="data">${info.ReserveTime}</i>
                               </c:if>
                               <%--待支付,待入住--%>
                               <c:if test="${info.OrdState==0 || info.OrdState==1 || info.OrdState==2 }">
                                   <i class="data">${info.ReserveTime}</i>
                               </c:if>
                           </div>
                       </div>




                   </c:forEach>
               </c:if>
               <c:if test="${dataList == null}"><img  style="width:100%" src="<%=basePath%>/images/icon38.png"></c:if>
           </div>
        </div>
      </div>
    </div>
</div>
	<form id="submitForm" method="post" action="order/gotoAddEvaluate">
   		<input type="hidden" value="" id="ordCode" name="ordCode"/>
		<input type="hidden" value="" id="hotelName" name="hotelName"/>
		<input type="hidden" id="orderState" name="orderState" value="${ordState}">
   	</form>
<!-- footer -->
<footer class="footer">
	<div class="weui-tabbar">
        <a href="home/index" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="images/icon/home.png" alt="">
          </div>
          <p class="weui-tabbar__label">酒店预订</p>
        </a>
        <a href="member/getMemQRCode" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="images/icon/code.png" alt="">
          </div>
          <p class="weui-tabbar__label">我的二维码</p>
        </a>
        <a href="order/getAllOrderList?ordState=1000" class="weui-tabbar__item weui-bar__item--on">
          <div class="weui-tabbar__icon">
            <img src="images/icon/order-sel.png" alt="">
          </div>
          <p class="weui-tabbar__label">我的订单</p>
        </a>
        <a href="member/memberCenter" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="images/icon/user.png" alt="">
          </div>
          <p class="weui-tabbar__label">个人中心</p>
        </a>
      </div>
</footer>
</body>
<!-- jquery引入 -->
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<!-- weui引入 -->
<script type="text/javascript" src="js/jquery/weui.js"></script>
<!-- swiper引入 -->
<script type="text/javascript" src="js/jquery/swiper.js"></script>
<script>
	var moveDown=false;
    var refreshText = document.getElementById('refreshText');
    var parent = document.getElementById('main');
    
    //再次预定,根据订单code查询hotelKey在进入房间详情，存在固定日期问题
    function _orderAgain(hotelCode) {
        var url ="<%=basePath%>home/hotelCodeDetails?hotelCode="+hotelCode;
        window.location.replace(url);
    }

    //tab查询orderList
    function _selectOrderList(ordState) {
        $("#contentDiv").html("");
        $.ajax({
            url:"<%=basePath%>order/getOrderList",
            type:"post",
            data:{ordState:ordState},
            success:function(data){
           		if(data=="gotoRegister"){
                    window.location.replace("<%=basePath%>home/gotoRegister");//注册页面
                }else if(data!=null&&data!=""){
                	var html="";
                	var dataList = data.dataList;
                	if(dataList.length>0){
                        for(var i=0;i<dataList.length;i++){
                            html+='<div class="order-con" ><div class="title"><b class="num" onclick="_gotoDetail(\''+dataList[i].Code+'\');return false;">'+dataList[i].HotelName+'</b><i  class="state state-button"';
                            var toJuageClickHtml = 'onclick="_toJuage(\''+dataList[i].Code+'\',\''+dataList[i].HotelName+'\');return false;"';
                            var toPayClickHtml = 'onclick="_toPay(\''+dataList[i].Code+'\');return false;"';
                            if(dataList[i].OrdState==0){
                               html+= toPayClickHtml;
                            }else if(dataList[i].OrdState==4){
                               html+=toJuageClickHtml;
                            }
                            html+= '>'+dataList[i].OrdStateName+'</i></div>';
                            html+='<div class="list" onclick="_gotoDetail(\''+dataList[i].Code+'\');return false;"><i><p>'+dataList[i].RoomType+'</p>'+'<p class="num">订购数量'+dataList[i].RoomNum+'</p></i></div>';
                            html+='<div class="bot"><b class="price">¥'+dataList[i].TotalSettlement.toFixed(2)+'</b>';
                            var toOrderAgainHtml = '<i class="data data-button" onclick="_orderAgain(\''+dataList[i].Code+'\');return false;">再次预订</i>';
                            if(dataList[i].OrdState==200||dataList[i].OrdState==-1){
                                /* html+=toOrderAgainHtml; */
                            }else{
                                html+='<i class="data">'+dataList[i].ReserveTime+'</i>';
                            }
                            html+='</div></div>';
                        }
                        $("#contentDiv").html(html);
                    }else{
                        var html="<img src='<%=basePath%>/images/icon38.png' style='width:100%'>";
                        $("#contentDiv").html(html);
                    }

                    if(ordState==1000){
                        $("#allorder").addClass("weui-bar__item--on");
                        $("#toPay").removeClass("weui-bar__item--on");
                        $("#toLive").removeClass("weui-bar__item--on");
                        $("#toJudge").removeClass("weui-bar__item--on");
                    }else if(ordState==0){
                        $("#toPay").addClass("weui-bar__item--on");
                        $("#allorder").removeClass("weui-bar__item--on");
                        $("#toLive").removeClass("weui-bar__item--on");
                        $("#toJudge").removeClass("weui-bar__item--on");
                    }else if(ordState==1){
                        $("#toLive").addClass("weui-bar__item--on");
                        $("#toPay").removeClass("weui-bar__item--on");
                        $("#allorder").removeClass("weui-bar__item--on");
                        $("#toJudge").removeClass("weui-bar__item--on");
                    }else if(ordState==2){
                        $("#toJudge").addClass("weui-bar__item--on");
                        $("#toPay").removeClass("weui-bar__item--on");
                        $("#allorder").removeClass("weui-bar__item--on");
                        $("#toLive").removeClass("weui-bar__item--on");
                    }
                    $("#orderState").val(ordState);
                    
                    //下拉刷新显示用
            		parent.style.transform = "translateY(0)";
                    refreshText.style.transform = "translateY(-50)";
                    moveDown=false;
                }
            },
            error:function(e){
                window.location.replace("<%=basePath%>home/index");
            }
        });
    }

    //跳转 评价页面
    function  _toJuage(ordCode,hotelName) {
    	$("#ordCode").val(ordCode);
    	$("#hotelName").val(hotelName);
    	$("#submitForm").attr("action","order/gotoAddEvaluate").submit();
    }
    //跳转订单详情
    function  _gotoDetail(ordCode) {
    	$("#ordCode").val(ordCode);
    	$("#submitForm").attr("action","order/getOrderDetail").submit();
    }

    //跳转 支付页面
    function _toPay(ordCode) {
        $("#ordCode").val(ordCode);
    	$("#submitForm").attr("action","home/orderPaymentDetail").submit();
    }
    
       $(function () {
            //2.定义一些需要常用的变量
            var startY = 0;//手指触摸最开始的Y坐标

            //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
            parent.addEventListener('touchstart',function(e){
                startY = e.touches[0].pageY;
            });

            //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字

            parent.addEventListener('touchmove',function (e) {
                if((e.touches[0].pageY-startY) > 0 && isTop()){
                    parent.style.transform = "translateY(50px)";
                    refreshText.innerHTML = "释放立即刷新...";
                    refreshText.style.transform = "translateY(0)";
                    moveDown=true;
                    e.preventDefault();
                }
            });

            //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
            parent.addEventListener('touchend',function (e) {
                if(isTop() && moveDown){
	                refreshText.innerHTML = "正在刷新...";
	                _selectOrderList($("#orderState").val());
                }else{
                	moveDown=false;
                }
                return;
            });

    });
    function isTop(){
         var t = parent.scrollTop;
         return t === 0 ? true : false;
     }
</script>
        
</html>
